<template>
	<view>

		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			<image mode="widthFix" src="../../static/f1.png" class="menu" @click="close"></image>
			<view class="center">
				<label class="title">详情</label>

			</view>
			<image mode="widthFix" src="../../static/share.png" class="scan" @click="share"></image>
		</view>

		<view class="main" id="main">
			<view class="statusView">
				<image class="status" :src="`../../static/${pathList[item.status]}`" mode="widthFix"></image>
				<label class="statusLabel"
					:style="`color:${item.status==0? '#1587F5':'#78C5A7'} ;`">{{item.status==0? "等待确认":'成功'}}</label>
				<label class="statusTime">{{item.create_time}} +0800</label>
			</view>

			<view class="contentItem">
				<view class="itemView">
					<label class="itemName">金额</label>
					<label class="itemMoney">{{money}} {{name}}</label>
				</view>
			</view>

			<view class="contentItem">
				<view class="itemView">
					<label class="itemName">收款地址</label>
					<view class="itemCon">{{item.tra_en_address }}</view>
				</view>
				<view class="itemView marginTOp">
					<label class="itemName">付款地址</label>
					<view class="itemCon">{{item.tra_out_address }}</view>
				</view>
			</view>


			<view class="contentItem">
				<view class="itemView border">
					<label class="itemName">交易号</label>
					<label class="itemCon">{{item.hash}} </label>
				</view>

				<view class="itemView cen">
					<label class="itemName ">查询详细信息</label>
					<image src="../../static/right3.png" mode="widthFix" class="rightItem"></image>
				</view>
			</view>
		</view>


		<view class="shareView" v-if="isShow">
			<view class="bg"></view>

			<canvas canvas-id="myCanvas" class="canvas"></canvas>
			<view class="bottomView">
				<view class="cancelBtn" @click="closeCan">取消</view>
				<view class="shareBtn" @click="onSaveImg">分享</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				item: {},
				name: '',
				money: '',
				canvasW: '',
				canvasH: "",
				path: '../../static/img48.png',
				pathList: [
					'img199.png',
					'img48.png'
				],
				isShow: false,
				img: '',
				domId: '',
				base64: '',
			}
		},
		mounted() {

		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			console.log(this.item)
			if (this.item.type == 2) {
				this.money = '-' + this.item.money
				
				if(this.item.name == "ETH"&& this.item.parent == 'ETH'){
				
					this.name = 'ETH'
				}else if(this.item.name == "TRX"&& this.item.parent == 'TRX'){
				
					this.name = 'TRX'
				}else{
					
				this.name = 'USDT'
				}
				
			} else {
				this.money = '+' + this.item.money
				this.name = ''
			}

			if (this.item.status == 0) {
				this.path = '../../static/img199.png'
			} else {
				this.path = '../../static/img48.png'
			}
			
			this.item.create_time = this.initTime(this.item.create_time)
			this.canvasH = uni.getSystemInfoSync().screenHeight
			this.canvasW = uni.getSystemInfoSync().screenWidth
		},
		methods: {

			close() {
				uni.$emit("getTransaction")
				this.Api.back()
			},
			closeCan() {
				this.isShow = false;
			},
			
			initTime(time){
				console.log('当前时间',time)
				let YMD= time.split(' ');
				let YMDList= YMD[0].split('-')
				let initTime = YMDList[0] + "年"+ YMDList[1]+'月'+YMDList[2]+"日" + " "+YMD[1]
				console.log('年月日',initTime)
				return initTime
				
			},
			async share() {
				this.isShow = true;
				this.base64 = await this.drawCanvas();
				
			},

			shareClick() {
				var that = this
				uni.share({
					provider:'weixin',
					type:2,
					scene:'WXSceneSession',
					imageUrl:this.base64,
					success(res) {
						console.log('分享成功',res)
					}

				})
			},

			 onSaveImg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.base64,
					success: () => {
						uni.showToast({
							title: '保存成功'
						});
					}
				});

			},
			drawCanvas() {
				var that = this
				this.Api.s_loading("海报生成中")

				return new Promise((resolve, reject) => {

					setTimeout(() => {

						const ctx = uni.createCanvasContext('myCanvas', this);
						const {
							windowWidth,
							windowHeight
						} = uni.getSystemInfoSync();
						let width = windowWidth * 0.8;


						ctx.drawImage('../../static/bg1.png', 0, 0, width, windowHeight * 0.7)
						ctx.drawImage(this.path, (width - 80) / 2, 30, 80, 80)
						ctx.setTextAlign('center')
						ctx.fillStyle = '#78C5A7'

						ctx.fillText(this.item.status == 0 ? "等待确认" : '成功', width / 2, 130)

						ctx.setTextAlign('center')
						ctx.fillStyle = '#BEBDBF'

						ctx.fillText(this.item.create_time + " 0800", width / 2, 150)
						this.fillRoundRect(ctx, (width - width * 0.9) / 2, 170, width * 0.9, 40, 5,
						'#FFF');


						ctx.fillStyle = '#BEBDBF'

						ctx.fillText('金额', 40, 195)

						ctx.fillStyle = '#000'

						ctx.setTextAlign('right')
						ctx.fillText(this.money + '  ' + this.name, (width * 0.9), 195)

						this.fillRoundRect(ctx, (width - width * 0.9) / 2, 220, width * 0.9, 120, 5,
							'#FFF');
						ctx.fillStyle = '#BEBDBF'

						ctx.fillText('收款地址', 70, 245)

						ctx.fillStyle = '#000'

						ctx.setTextAlign('right')
						this.textPrewrap(ctx, this.item.tra_en_address, (width * 0.9), 245, 10, 150, 3)



						ctx.fillStyle = '#BEBDBF'

						ctx.fillText('付款地址', 70, 300)
						ctx.fillStyle = '#000'

						ctx.setTextAlign('right')
						this.textPrewrap(ctx, this.item.tra_out_address, (width * 0.9), 300, 10, 150, 3)


						this.fillRoundRect(ctx, (width - width * 0.9) / 2, 350, width * 0.9, 120, 5,
							'#FFF');
						ctx.fillStyle = '#BEBDBF'

						ctx.fillText('交易号', 60, 370)
						ctx.fillStyle = '#000'

						ctx.setTextAlign('right')
						this.textPrewrap(ctx, this.item.hash, (width * 0.9), 370, 10, 150, 3)

						this.fillRoundRect(ctx, (width - width * 0.8) / 2, 420, width * 0.8, 1, 0,
							'#D4D4D5');

						ctx.fillStyle = '#BEBDBF'

						ctx.fillText('查询详细信息', 90, 450)

						ctx.drawImage('../../static/right.png', (width * 0.9 - 30), 440, 15, 15)

						this.fillRoundRect(ctx, (width - width * 0.9) / 2, 465, width * 0.9, 80, 0,
							'#0396E4');

						ctx.drawImage('../../static/t2.png', 40, 490, 36, 34)

						ctx.fillStyle = '#FFFFFF'

						ctx.fillText('imToken', 130, 505)

						ctx.fillStyle = '#E6E6E6'

						ctx.fillText('https://token.im', 170, 520)

						ctx.drawImage('../../static/erw.png', (width * 0.9 - 50), 490, 40, 40)
						// ctx.fillText("12312dasasasasas49848998", (width * 0.9), 245,500)
						ctx.draw(true, (res) => {
							that.Api.h_loading()
							setTimeout(() => {
								uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									destWidth:1080,
									destHeight:1920,
									quality: 1,
									fileType: 'png',
									success: (res) => {
										that.base64 = res.tempFilePath;

										resolve(res.tempFilePath);

									},
									fail(err) {
										console.log(err)
									},
									complete(val) {
										uni.hideLoading();
									},
								});
							}, 600)

						})




					}, 500)

				})
			},
			baseFun() {
				const token = uni.getStorageSync("token");

				return token
			},
			toImg(ctx) {
				var image = new Image();
				image.src = ctx.toDataURL("image/png");
				console.log(image)
				return image
			},
			textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
				var drawTxt = ''; // 当前绘制的内容
				var drawLine = 1; // 第几行开始绘制
				var drawIndex = 0; // 当前绘制内容的索引
				console.log(content)
				if (content == null) return
				// 判断内容是否可以一行绘制完毕
				if (ctx.measureText(content).width <= lineMaxWidth) {
					ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
				} else {
					for (var i = 0; i < content.length; i++) {
						drawTxt += content[i];
						if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
							if (drawLine >= lineNum) {
								ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
								break;
							} else {
								ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
								drawIndex = i + 1;
								drawLine += 1;
								drawY += lineHeight;
								drawTxt = '';
							}
						} else {
							// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
							if (i === content.length - 1) {
								ctx.fillText(content.substring(drawIndex), drawX, drawY);
							}
						}
					}
				}
			},
			// 绘制带圆角的矩形方法
			fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
				//圆的直径必然要小于矩形的宽高
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边
				this.drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
				cxt.fill();
				cxt.restore();
			},

			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制，弧度从0到1/2PI
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线
				cxt.lineTo(radius, height);

				//左下角圆弧，弧度从1/2PI到PI
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线
				cxt.lineTo(0, radius);

				//左上角圆弧，弧度从PI到3/2PI
				cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

				//上边线
				cxt.lineTo(width - radius, 0);

				//右上角圆弧
				cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

				//右边线
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			}


		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight +20|| 10; //如果没有获取到高度，那么指定10px；
			}
		},
	}
</script>

<style scoped>
	page {
		background-color: #F8F8FA;
	}

	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 120rpx;
		padding: 40rpx 40rpx;


	}

	.menu {
		width: 40rpx;

	}

	.scan {
		width: 50rpx;


	}

	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.main {
		width: 100%;
		box-sizing: border-box;
		background-color: #F7F7F7;
		padding: 20rpx;
	}

	.statusView {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.status {
		width: 150rpx;

	}

	.statusLabel {
		margin-top: 10rpx;
		font-size: 35rpx;
	}

	.statusTime {
		margin-top: 10rpx;
		font-size: 25rpx;
		color: #BEBDBF;
	}

	.contentItem {
		width: 100%;
		background-color: white;
		border-radius: 10rpx;
		padding: 40rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

	}

	.itemView {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;


	}

	.marginTOp {
		margin-top: 40rpx;
	}

	.itemName {
		font-size: 30rpx;
		color: #BEBDBF;
	}

	.itemMoney {
		font-size: 30rpx;
		font-weight: 500;

	}

	.itemCon {
		width: 70%;
		font-size: 30rpx;
		text-align: right;
		height: auto;
		display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.border {
		padding-bottom: 30rpx;
		border-bottom: 1rpx #BEBDBF solid;
	}

	.rightItem {
		width: 32rpx;
	}

	.cen {
		align-items: center;
		margin-top: 40rpx;
	}

	.shareView {
		width: 100vw;
		height: 100vh;

		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #000000;
		opacity: 0.5;
	}

	.canvas {
		width: 80%;
		height: 70%;
		border-radius: 20rpx;
		background-color: #F8F8FA;
	}

	.bottomView {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;

	}

	.cancelBtn {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #0387CD;
		background-color: #BEE8FE;
	}

	.shareBtn {
		width: 48%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #0387CD;
	}
</style>
